<style>
    .layui-form-label.required:before { /* 这种写法也可以*/
        content: ' *';
        color: red;
    }

    .open-form .layui-input-block{
        margin-left: 145px;
    }
    .open-form .layui-form-label {
        width: 115px;
    }

    .addProductionPlanForm-title .title, .examineProductionPlanForm-title .title {
        display: inline-block;
        margin: 20px;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        line-height: 19px;
        position: relative;
        padding: 6px 0 19px 0;
    }

    .addProductionPlanForm-title .title:after, .examineProductionPlanForm-title .title:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: calc(100% + 6px);
        height: 3px;
        background: #0A8B0A;
    }
</style>
<script type="text/javascript" src="../../../admin/assets/js/pdfobject.min.js"></script>
<!-- 表单弹窗 -->
<form lay-filter="demandPlanAddForm" class="layui-form demandPlanAddForm open-form">
    <div class="open-model">
        <div class="open-auto">
            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label required">客户名称：</label>
                    <div class="layui-input-block">
                        <select id="customerInfo" lay-search="" name="customerInfo" lay-filter="customerInfo"
                                class="common-select-search">
                            <option value="">请选择客户名称</option>
                        </select>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label required">物料编码：</label>
                    <div class="layui-input-block">
                        <select id="skuCodeInfo" lay-search="" name="skuCodeInfo" lay-filter="skuCodeInfo"
                                class="common-select-search">
                        </select>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label required">物料描述：</label>
                    <div class="layui-input-block">
                        <input id="skuDescription" name="skuDescription" placeholder="物料描述" type="text"
                               class="layui-input"
                               required autocomplete="off" disabled/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label required">采购组织：</label>
                    <div class="layui-input-block">
                        <input id="purchaseTissue" name="purchaseTissue" placeholder="采购组织" type="text" class="layui-input"
                               lay-verify="required"
                               required autocomplete="off"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">

                <div class="layui-col-md3">
                    <label class="layui-form-label">采购组名称：</label>
                    <div class="layui-input-block">
                        <input id="purchaseTissueName" name="purchaseTissueName" placeholder="采购组名称" type="text" class="layui-input"
                               required autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">物料类型：</label>
                    <div class="layui-input-block">
                        <select id="materialTypeId" name="materialTypeId" class="common-select-search"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label required">计划接收时间：</label>
                    <div class="layui-input-block">
                        <input id="planReceiveTime" name="planReceiveTime" type="text" class="layui-input"
                               required autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label required">三方仓库存：</label>
                    <div class="layui-input-block">
                        <input type="number" id="tripartiteStorage" name="tripartiteStorage" class="layui-input"
                               placeholder="三方仓库存">
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label">生产线：</label>
                    <div class="layui-input-block">
                        <input type="text" id="productLineName" name="productLineName" class="layui-input"
                               placeholder="生产线">
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">近三月平均到货：</label>
                    <div class="layui-input-block">
                        <input type="number" id="averageArrival" name="averageArrival" class="layui-input"
                               placeholder="近三月平均到货">
                    </div>
                </div>
            </div>
            <div class="examineProductionPlanForm-title">
                <h3 class="title" style="margin-left: 0;">每日计划数量</h3>
            </div>
            <div class="layui-form-item layui-row">
                <button type="button" id="addTestItem" class="layui-btn" lay-filter="addTestItem"
                >添加计划数量
                </button>
                <div id="demandDay">
                    <table class="layui-table" id="testItemTable" lay-filter="testItemTable"></table>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="productQualityTaskFormSubmit" lay-submit>提交</button>
        </div>
    </div>
</form>

<script type="text/html" id="viewAttachmentHtml">
    <div id="example1" style="height: 100%;"></div>
</script>

<script type="text/html" id="testItemTableBar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delTestItem">删除</a>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'laydate', 'admin', 'laytpl', 'upload', 'config'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var config = layui.config;
        var table = layui.table;
        var admin = layui.admin;
        var form = layui.form;
        var laydate = layui.laydate;

        let skuInfoObj = new Map()
        let testItemData = [];

        laydate.render({
            elem: '#planReceiveTime'
            , type: 'datetime'
        });

        //初始化客户正式客户信息
        admin.req('enterprise/sell/admin/customersInfo/list', {limit: 9999}, function (res) {
            if (res.code == 200) {
                if (res.data.length > 0) {
                    $.each(res.data, function (index, item) {
                        $('#customerInfo').append(new Option(item.customerName, item.id));
                    })
                    form.render('select');
                }
            } else {
                layer.msg(res.msg, {icon: 2});
            }
        }, 'GET');

        //客户物料的数据
        form.on('select(customerInfo)', function (data) {
            $("#skuCodeInfo").empty();
            admin.initDataSelectAndMap("enterprise/sell/admin/customerProductCatalog/list",
                {customerId: data.value},
                "skuCodeInfo", null, "物料编码", "skuCode", "id", skuInfoObj);
        });

        form.on('select(skuCodeInfo)', function (data) {

            let val = data.value;
            let skuInfo = {};
            if (skuInfoObj.get(val)) {
                skuInfo = skuInfoObj.get(val);
                $("#skuDescription").val(skuInfo.skuName+"-"+skuInfo.skuSpec);
            }
        });

        admin.getDictList("materialTypeId", "pro_customer_product_material", null, "物料类型");

        //表单提交事件
        form.on('submit(productQualityTaskFormSubmit)', function (d) {
            layer.load(2);
            d.field.customerId = $("#customerInfo").val();
            let cacheElement = table.cache['testItemTable'];

            d.field.planRecords  = cacheElement;

            if (skuInfoObj.get($("#skuCodeInfo").val())) {
                skuInfo = skuInfoObj.get($("#skuCodeInfo").val());
                d.field.customerProductId = skuInfo.id;
            }
            admin.req('production/productionPlan/admin/demandPlan/add', JSON.stringify(d.field), function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1});
                    table.reload('demandPlanInfo');
                    layer.closeAll('page');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'POST', true, 'application/json; charset=utf-8');
            return false;
        });

        //初始化质检标准表
        table.render({
            elem: '#testItemTable',
            data: testItemData,
            id: 'testItemTable',
            limit: 9999,
            even: true,
            cols: [[
                {type: 'numbers', title: '序号', width: 80}
                , {
                    field: 'planTime',
                    align: 'center',
                    title: '计划时间',
                    templet: function (d){
                        return d.planTime ? '<div class="date-cell">'+d.planTime+'</div>': '<div class="date-cell"></div>'
                    }
                }
                , {field: 'planNum', edit: 'text', align: 'center', title: '计划数量'}
                , {align: 'center', toolbar: '#testItemTableBar', title: '操作'}
            ]]
        });

        //
        table.on('rowDouble(testItemTable)', function(obj) {
            let birthdayCell = $(obj.tr).find('.date-cell');
            laydate.render({
                elem: birthdayCell[0], // 绑定到生日单元格
                type: 'month', // 类型为月
                format: 'yyyy-MM', // 格式
                range: false, // 不允许选择范围
                done: function (value, date) {
                    obj.update({
                        planTime: value
                    });
                    // 重新加载表格数据
                    table.reload('testItemData', {
                        data: testItemData // 传入更新后的数据
                    });
                }
            });
            // 手动触发日期选择器
            birthdayCell.click();
        });

        //移除某一行
        table.on('tool(testItemTable)', function (obj) {
            if (obj.event === 'delTestItem') { //删除
                obj.del(); // 删除当前行
                obj = null;
                // 获取表格数据
                testItemData = table.cache['testItemTable'];
                let data = [];
                testItemData.forEach(item => {
                    if(item.planTime !== undefined){
                        data.push(item)
                    }
                })
                table.reload('testItemTable', {
                    data: data
                });
            }
        });

        //addTestItem
        $("#addTestItem").click(function () {
            testItemData = table.cache['testItemTable'];
            let newRow = {
                planTime: "",
                planNum: ""
            };
            testItemData.push(newRow);
            table.reload('testItemTable', {
                data: testItemData
            })
        })

    });
</script>